<template>
  <div>
    <section class="form">
      <el-card>
        <el-form
          ref="form"
          :model="formParams"
          :rules="rules"
          label-width="280px"
        >
          <el-form-item :label="$t('sys.delete')" prop="accessDay">
            <el-input
              :placeholder="$t('sys.delete')"
              v-model="formParams.accessDay"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="app名称" prop="appName">
            <el-input
              placeholder="app名称"
              v-model="formParams.appName"
            ></el-input>
          </el-form-item> -->
          <el-form-item :label="$t('sys.limit')" prop="downloadSpeedSize">
            <el-input
              :placeholder="$t('sys.limit')"
              v-model="formParams.downloadSpeedSize"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('sys.empress')" prop="imgCompressSetting">
            <el-input
              :placeholder="$t('sys.empress')"
              v-model="formParams.imgCompressSetting"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('sys.adviseNum')" prop="recommendeVesselsShowNum">
            <el-input
              :placeholder="$t('sys.adviseNum')"
              v-model="formParams.recommendeVesselsShowNum"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('sys.limit')" prop="uploadMax">
            <el-input
              :placeholder="$t('sys.limit')"
              v-model="formParams.uploadMax"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              size="default"
              v-auth="'/sys/setting/update'"
              @click="save"
            >
              {{ $t('operation.save') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { settingGetInfo, settingUpdate } from '@/api/system/setting'
import { ElMessage } from 'element-plus'
import Editor from '@tinymce/tinymce-vue'

let $emit = defineEmits(['refresh'])

const defaultForm = {
  id: '',
  accessDay: '',
  appName: '',
  downloadSpeedSize: '',
  imgCompressSetting: '',
  recommendeVesselsShowNum: '',
  uploadMax: '',
}
let formParams = reactive<any>({
  ...defaultForm,
})
const rules = {
  accessDay: [{ required: true, message: '请输入', trigger: 'blur' }],
  appName: [{ required: true, message: '请输入', trigger: 'blur' }],
  downloadSpeedSize: [{ required: true, message: '请输入', trigger: 'blur' }],
  imgCompressSetting: [{ required: true, message: '请输入', trigger: 'blur' }],
  recommendeVesselsShowNum: [{ required: true, message: '请输入', trigger: 'blur' }],
  uploadMax: [{ required: true, message: '请输入', trigger: 'blur' }],
}

onMounted(async () => {
  let { data, status } = await settingGetInfo()
  if (status == 200) {
    Object.keys(formParams).forEach((key) => {
      formParams[key] = data[key]
    })
  }
})

let loading = ref(false)
let form = ref()
//保存按钮的方法
const save = async () => {
  await form.value.validate()
  loading.value = true
  let result = await settingUpdate(formParams)
  loading.value = false
  if (result.status == 200) {
    ElMessage({
      type: 'success',
      message: '操作成功',
    })
    $emit('refresh')
  } else {
    ElMessage({
      type: 'error',
      message: '操作失败',
    })
  }
}
</script>

<style scoped>
.form {
  width: 50%;
}
</style>
